<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet"
      href="../statics/css/semantic.css" />
    <link  href="../statics/css/screen.css"
      media="screen, projection"
      rel="stylesheet"
      type="text/css" /> 
	<link rel="stylesheet" type="text/css" href="../statics/css/verify.css">
    <link rel="stylesheet" href="../statics/css/iconfont.css" />
    <script src="../statics/js2/jquery-3.2.1.min.js"></script>
    <script src="../statics/css/semantic.js"></script>
	<script src="../statics/js2/verify.js"></script>
  </head>
 
  <body>
    <div>
      <div class="container"  id="content">
        <artical class="form">
          <ul class="list">
            <div class="title">
              <div class="register">
                <i class="iconfont icon-xingming"></i> <span>注册</span>
              </div>
              <div class="login"><span>已有账号</span> <a href="../index.html">登陆</a></div>
            </div>
            <li class="liparent">
              <div class="title">邮箱</div>
              <div class="minput">
                <i class="iconfont icon-youxiang"></i>
                <input id="Email"
                  class="inner_input"
                  type="text"
                  onkeyup="showError(event)"
            	  onblur="showError(event)"
                  placeholder="邮箱" />
              </div>
              <p class="error empty" >邮箱不能为空</p>
              <p class="error rule" >邮箱的格式不正确</p>
            </li>
            <li class="liparent">
              <div class="title">手机号码</div>
              <div class="minput">
                <i class="iconfont icon-youxiang"></i>
                <input id="Telphone" class="inner_input" type="text" placeholder="手机号码" onblur="showPhoneError(event)" onkeyup="showPhoneError(event)"/>
              </div>
              <p class="error empty"  >手机号码不能为空</p>
              <p class="error rule" >手机号码的格式不正确</p>
            </li>
            <li class="liparent">
              <div class="title">用户名</div>
              <div class="minput">
                <i class="iconfont icon-xingming"></i>
                <input id="username" class="inner_input" type="text" placeholder="用户名" 
            	onkeyup="showUserError(event)" onblur="showUserError(event)" />
              </div>
              <p class="error empty" >用户名不能为空</p>
              <p class="error rule" >用户名长度应在4~8个字符之间</p>
            </li>
            <li class="liparent">
              <div class="title">密码</div>
              <div class="minput">
                <i class="iconfont icon-youxiang"></i>
                <input
            		id="password1"
                  class="inner_input hidepassword"
                  type="password"
                  placeholder="密码" onkeyup="showPasswordError(event)" onblur="showPasswordError(event)"/>
                <i class="iconfont icon-yanjing"
                  onclick="showPassWordInput('hidepassword')"></i>
              </div>
              <p class="error empty" >密码不能为空</p>
              <p class="error length" >密码的长度至少6个字符</p>
            </li>
            <li class="liparent">
              <div class="title">密码</div>
              <div class="minput">
                <i class="iconfont icon-youxiang"></i>
                <input id="password2"
                  class="inner_input hidepassword"
                  type="password"
                  placeholder="再次输入密码"  onkeyup="showPasswordCheck(event)" onblur="showPasswordCheck(event)"
                />
                <i
                  class="iconfont icon-yanjing"
                  onclick="showPassWordInput('hidepassword')"
                ></i>
              </div>
              <p class="error empty" >密码不能为空</p>
              <p class="error length" >密码的长度至少6个字符</p>
              <p class="error rule" >两次密码输入不一致</p>
            </li>
            <li class="liparent">
			 <div class="minput">
				 <button class="minput mbtn_regist" type="button" id="register_btn" onclick="clickRegister()">注册</button>
				 <div id="mpanel4" style="margin-top:50px;"> </div>
			 </div>
              
            </li>
            <li class="liparent">
              <div class="title"></div>
              <div class="minput prompt">
              </div>
            </li>
            <li class="login_theother">
              <p class="title">
                <span class="leftline"></span>
                <span class="rightline"></span>
              </p>
              <div class="icongroup">
              </div>
            </li>
          </ul>
          <ul class="aside">
            <li class="title">尝试码云企业版？</li>
            <li>
              <i class="iconfont icon-dui"></i>
              <span>不止更多成员、更高配额</span>
            </li>
            <li>
              <i class="iconfont icon-dui"></i>
              <span>
                灵活支撑协作研发、代码交付、IT 教育培训等场景代码托管需求
              </span>
            </li>
            <li class="title"><span>他们都在用</span></li>
            <li>
              <p>
                已有超过 50000 企业研发团队选择码云企业版，60%
                客户来自口碑推荐。
              </p> </li>  </ul>
        </artical>
      </div>
	  <div id="mpanel4" style="margin-top:50px;">
	  </div>
      <footer>
        <div class="mfooter"> </div>
        <div class="pfooter"> <div class="container_footer"> </div> </footer> </div>
  </body>
</html>

<script>



  //var URL = 'http://localhost:8088';
  var URL = 'http://39.107.205.22:8088';
  $('#mpanel4').pointsVerify({
  	
  	baseUrl:URL,  //服务器请求地址,  
  	containerId:'register_btn', // pop模式 必填 被点击之后出现行为验证码的元素id
  	mode:'pop',
  	imgSize : {       //图片的大小对象
         	width: '400px',
         	height: '200px',
  	},
         ready : function() {
      },
      success : function(params) {
  		console.log("success")
  	//返回的二次验证参数 合并到验证通过之后的逻辑 参数中回传服务器
      // params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
      // 例如: login($.extend({}, params))
  		var name =  document.getElementById("username").value
          var pass = document.getElementById("password").value
          var email =  document.getElementById("email").value
          var birth = document.getElementById("birth").value
    
          $.ajax({
              url: URL + "/user/register",
              type:"post",
              data:{"username":name,"password":pass,"email":email,"birth":birth},
              dataType:"json",
              success:function(result){
                  window.location.href ="index.html"
    
              }
          })
      },
      error : function() {
  		console.log("error")
      }
  });
  
  /**
   * @description 移动端按钮切换
   */
  function toggleClass(e) {
    $($(e.currentTarget).siblings()[0]).toggleClass('active')
    $(e.currentTarget).toggleClass('active')
  }
  /**
   * @description 隐藏校验信息
   */
  ;(function hideitems() {
    $('.error').hide()
    $('.showpassword').hide()
  })()
  /**
   * @description 正则校验标准
   */
  var isEmail = value => {
    return /^[A-Za-z0-9-._]+@[A-Za-z0-9-]+(.[A-Za-z0-9]+)*(.[A-Za-z]{2,6})$/.test(
      value
    )
  }
  var isPhone = value => {
    return /^[1][3,4,5,7,8][0-9]{9}$/.test(value)
  }
  var zoneurl = value => {
    return /^[a-zA-Z][-_a-zA-Z0-9]*[a-zA-Z0-9]{1,}$/.test(value)
  }
  /**
   * 邮箱校验
   */
  var showError = (e, type) => {
    if (!$(e.currentTarget).val()) {
      $(e.currentTarget)
        .parents('.liparent').children('.error').hide()
      $(e.currentTarget)
        .parents('.liparent').children('.empty').show()
    } else if (!isEmail($(e.currentTarget).val())) {
      $(e.currentTarget)
        .parents('.liparent').children('.error').hide()
      $(e.currentTarget)
        .parents('.liparent').children('.rule').show()
    } else if (isEmail($(e.currentTarget).val())) {
      $(e.currentTarget)
        .parents('.liparent').children('.error').hide()
    }
  }
  
  /**
   * 手机号码校验
   */
  var showPhoneError = (e, type) => {
    if (!$(e.currentTarget).val()) {
      $(e.currentTarget)
        .parents('.liparent').children('.error').hide()
      $(e.currentTarget)
        .parents('.liparent').children('.empty').show()
    } else if (!isPhone($(e.currentTarget).val())) {
      $(e.currentTarget)
        .parents('.liparent').children('.error').hide()
      $(e.currentTarget)
        .parents('.liparent').children('.rule').show()
    } else if (isPhone($(e.currentTarget).val())) {
      $(e.currentTarget)
        .parents('.liparent').children('.error').hide()
    }
  }
  
  /**
   * 密码校验
   */
  var showPasswordError = (e, type) => {
    if (!$(e.currentTarget).val()) {
      $(e.currentTarget)
        .parents('.liparent').children('.error').hide()
      $(e.currentTarget)
        .parents('.liparent').children('.empty').show()
    } else if ($(e.currentTarget).val().length<6) {
      $(e.currentTarget)
        .parents('.liparent').children('.error').hide()
      $(e.currentTarget)
        .parents('.liparent').children('.length').show()
    } else if ($(e.currentTarget).val().length>=6) {
      $(e.currentTarget)
        .parents('.liparent').children('.error').hide()
    }
  }
  
  
  /**
   * 密码校验
   */
  var showPasswordCheck = (e, type) => {
  	  var password1 = document.getElementById('password1').value;
  	  var password2 = $(e.currentTarget).val()
  	  
    if (!$(e.currentTarget).val()) {
      $(e.currentTarget)
        .parents('.liparent').children('.error').hide()
      $(e.currentTarget)
        .parents('.liparent').children('.empty').show()
    } else if ($(e.currentTarget).val().length<6) {
      $(e.currentTarget)
        .parents('.liparent').children('.error').hide()
      $(e.currentTarget)
        .parents('.liparent').children('.length').show()
    } else if (password1 != password2) {
      $(e.currentTarget)
        .parents('.liparent').children('.error').hide()
      $(e.currentTarget)
        .parents('.liparent').children('.rule').show()
    } else if ($(e.currentTarget).val().length>=6 && password1 == password2) {
      $(e.currentTarget)
        .parents('.liparent').children('.error').hide()
    }
  }
  
  var showUserError = (e, type) => {
    if (!$(e.currentTarget).val()) {
      $(e.currentTarget)
        .parents('.liparent').children('.error').hide()
      $(e.currentTarget)
        .parents('.liparent').children('.empty').show()
    } else if ($(e.currentTarget).val().length<4 || $(e.currentTarget).val().length>8) {
      $(e.currentTarget)
        .parents('.liparent').children('.error').hide()
      $(e.currentTarget)
        .parents('.liparent').children('.rule').show()
    } else if ($(e.currentTarget).val().length>=4 && $(e.currentTarget).val().length<=8) {
      $(e.currentTarget)
        .parents('.liparent').children('.error').hide()
    }
  }
  /**
   * @description 密码明文密文切换
   */
  var conunt = 0
  var showPassWordInput = element => {
    function jugeTimes() {
      if (conunt % 2 === 1) {
        $(`.${element}`).attr('type', 'input')
      } else {
        $(`.${element}`).attr('type', 'password')
      }
    }
    jugeTimes()
    conunt++
  }
  
</script>

